<script setup>
import {
    Calendar,
  Document,
  Bell,
 Warning,
 Search ,
 HomeFilled
} from '@element-plus/icons-vue'
import { useRouter , useRoute} from 'vue-router'
import { ref, onMounted } from 'vue'
import useDetailStore from '@/store/modules/hospitial.js'

// 全局路由对象
const router = useRouter()

// 页面路由对象
const route = useRoute()

// 切换导航
const changeActive = (item) => {
  router.push({path: item.index, query: {hoscode: route.query.hoscode}})
  // console.log(item.index);
}

// 仓库对象
const detailStore = useDetailStore()

// 当前路由路径
const currentPath = ref('')

onMounted(() => {
  currentPath.value = route.path
  detailStore.getHospitalDetail(route.query.hoscode)
})

</script> 
<template >
    <div class="hospital">
        <div class="menu">
            <el-icon><HomeFilled /></el-icon>
            <span style="color: #7f7f7f;">/ 医院详细信息</span>
        <el-menu
        :default-active="currentPath"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        
        <el-menu-item index="/hospital/register" @click="changeActive">
            <el-icon><Calendar /></el-icon>
          <span>预约挂号</span>
        </el-menu-item>
        <el-menu-item index="/hospital/detail" @click="changeActive" >
            <el-icon><Document /></el-icon>
          <span>医院详情</span>
        </el-menu-item>
        <el-menu-item index="/hospital/notice" @click="changeActive">
        <el-icon><Bell /></el-icon>
          <span>预约须知</span>
        </el-menu-item>
        <el-menu-item index="/hospital/info" @click="changeActive">
            <el-icon><el-icon><Warning /></el-icon></el-icon>
          <span>停诊信息</span>
        </el-menu-item>
        <el-menu-item index="/hospital/search" @click="changeActive">
            <el-icon><Search /></el-icon>
          <span>查询/取消</span>
        </el-menu-item>
      </el-menu>
        </div>
        <div class="conetnt">
            <router-view></router-view>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .hospital {
        // width: 100vw;
        display: flex;
        .menu {
            width: 20%;
            // background-color: red;
            .el-menu-vertical-demo {
                width: 100%;
            }
        }
        .content {
            flex: 1;
            background-color: pink;
        }
    }
</style>